<template>
  <div class="home">
    <header class="header">
      <div class="user-info">
        <span>{{ profile.nickName || profile.username }}</span>
        <img v-if="profile.icon" :src="profile.icon" alt="头像" class="avatar">
      </div>
      <button @click="handleLogout" class="logout-button">退出登录</button>
    </header>
    <main class="main-content">
      <div class="profile-card">
        <div class="profile-header">
          <img v-if="profile.icon" :src="profile.icon" alt="头像" class="profile-avatar">
          <div class="profile-basic-info">
            <h2>{{ profile.nickName || profile.username }}</h2>
            <p>{{ profile.deptName }}</p>
          </div>
        </div>
        
        <div class="profile-details">
          <div class="detail-item">
            <span class="label">用户名:</span>
            <span class="value">{{ profile.username }}</span>
          </div>
          <div class="detail-item">
            <span class="label">昵称:</span>
            <span class="value">{{ profile.nickName }}</span>
          </div>
          <div class="detail-item">
            <span class="label">邮箱:</span>
            <span class="value">{{ profile.email }}</span>
          </div>
          <div class="detail-item">
            <span class="label">电话:</span>
            <span class="value">{{ profile.phone }}</span>
          </div>
          <div class="detail-item">
            <span class="label">性别:</span>
            <span class="value">{{ profile.sex === '1' ? '男' : profile.sex === '0' ? '女' : '未知' }}</span>
          </div>
          <div class="detail-item">
            <span class="label">角色:</span>
            <span class="value">{{ profile.roles ? profile.roles.join(', ') : '' }}</span>
          </div>
          <div class="detail-item">
            <span class="label">部门:</span>
            <span class="value">{{ profile.deptName }}</span>
          </div>
          <div class="detail-item">
            <span class="label">创建时间:</span>
            <span class="value">{{ profile.createTime }}</span>
          </div>
          <div class="detail-item">
            <span class="label">最后登录IP:</span>
            <span class="value">{{ profile.loginIp }}</span>
          </div>
          <div class="detail-item">
            <span class="label">最后登录时间:</span>
            <span class="value">{{ formatLoginTime(profile.loginTime) }}</span>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import { useAuthStore } from '@/stores/auth.js'
import { getUserProfile } from '@/api/auth.js'

export default {
  name: 'Home',
  data() {
    return {
      profile: {}
    }
  },
  
  mounted: function() {
    this.loadUserProfile()
  },
  
  methods: {
    loadUserProfile: function() {
      getUserProfile().then(response => {
        // 存储用户信息
        this.profile = response.data.data || {}
        const authStore = useAuthStore()
        authStore.setProfile(response.data || {})
        authStore.setPermissions(response.permissions || [])
      }).catch(error => {
        console.error('获取用户信息失败:', error)
        // 如果是401错误，清除认证信息并跳转到登录页
        if (error.response && error.response.status === 401) {
          this.handleLogout()
        } else {
          alert('获取用户信息失败')
        }
      })
    },
    
    handleLogout: function() {
      const authStore = useAuthStore()
      authStore.clearAuth()
      
      // 清除记住密码的信息
      localStorage.removeItem('encryptedCredentials')
      
      // 跳转到登录页
      this.$router.push('/login')
    },
    
    formatLoginTime: function(timestamp) {
      if (!timestamp) return ''
      const date = new Date(timestamp)
      return date.toLocaleString('zh-CN')
    }
  }
}
</script>

<style scoped>
.home {
  min-height: 100vh;
  width: 55vw;
  background-color: #f0f2f5;
  margin: 0 auto;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.logout-button {
  padding: 8px 16px;
  background-color: #f56c6c;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.logout-button:hover {
  background-color: #f78989;
}

.main-content {
  padding: 24px;
}

.profile-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 24px;
}

.profile-header {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.profile-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-right: 20px;
}

.profile-basic-info h2 {
  margin: 0 0 8px 0;
  font-size: 24px;
  color: #333;
}

.profile-basic-info p {
  margin: 0;
  color: #666;
}

.profile-details {
  margin-top: 20px;
}

.detail-item {
  display: flex;
  padding: 12px 0;
  border-bottom: 1px solid #f5f5f5;
}

.detail-item:last-child {
  border-bottom: none;
}

.label {
  width: 120px;
  color: #999;
  font-weight: 500;
}

.value {
  flex: 1;
  color: #333;
}
</style>